<template>
    <div>
       <!-- 面包屑导航区域 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>您当前所在位置</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>分店价格</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 卡片视图区域 -->
      <el-card>
        <el-row :gutter="10">
          <el-col :span="2">
              <el-select v-model="searchTerm" placeholder="请选择" @change="termChange">
                <el-option
                  v-for="item in optionsVal"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
          </el-col>
          <el-col :span="4">
            <el-input placeholder="请输入内容" v-model="searchVal" @input="searchValChange">
              <el-button slot="append" icon="el-icon-search" @click="searchGood"></el-button>
            </el-input>
          </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="4">
             <el-select v-model="shopId" placeholder="请选择" >
                <el-option
                  v-for="item in shopOptions"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="4">
              <el-button type="primary" @click="outputList">按门店导出商品</el-button>
            </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <el-row>
              <el-col :span="24" v-for="(item, index) in sortList" :key="index" class="catebg">
                <el-button class="textbtn" type="text" @click="getGoodById(item.id)">{{item.title}}<i class="el-icon-arrow-right el-icon--right"></i></el-button>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="20">
            <el-table border style="width: 100%" class="onlyheader">
              <el-table-column label="商品名称(商品编号)" width="180" ></el-table-column>
              <el-table-column label="销售方式"></el-table-column>
              <el-table-column label="成本价格"></el-table-column>
              <el-table-column label="销售价格"></el-table-column>
              <el-table-column label="会员价格"></el-table-column>
               <template slot="empty">
                  <span style="font-size: 20px;padding:0;"></span>
                </template>
            </el-table>
            <el-table
              :data="goodList"
              border
              :show-header="false"
              style="width: 100%" row-key="1" class="onlybody">
              <el-table-column
                prop="name,commodity_code"
                label="商品名称(商品编号)"
                width="180">
                <template slot-scope="scope">
                  {{scope.row.name}}({{scope.row.commodity_code}})
                </template>
              </el-table-column>
              <el-table-column label="销售方式" >
                <template slot-scope="scope">
                  <el-table :data="scope.row.price" row-key="2" style="width: 100%" class="methodTable" :show-header="false" :border="false" @row-click="getListBygId">
                    <el-table-column
                      prop="name"
                      label="销售方式">
                    </el-table-column>
                    <el-table-column
                      prop="supply_price"
                      label="成本价格">
                    </el-table-column>
                    <el-table-column
                      prop="price"
                      label="销售价格">
                    </el-table-column>
                    <el-table-column
                      prop="member_price"
                      label="会员价格">
                    </el-table-column>
                  </el-table>

                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-card>
    </div>
</template>

<script>
export default {
  name: 'prices',
  data () {
    return {
      // 按什么条件
      searchTerm: '2',
      // 按什么内容
      searchVal: '',
      // 条件分类
      optionsVal: [
        {
          label: '请选择',
          value: ''
        },
        {
          label: '商品id',
          value: '1'
        },
        {
          label: '商品名称',
          value: '2'
        },
        {
          label: '商品编号',
          value: '3'
        }
      ],
      queryInfo: {
        // eslint-disable-next-line camelcase
        search_id: '',
        keyword: '',
        // eslint-disable-next-line camelcase
        cate_id: '',
        pagenum: 1,
        pagesize: 10

      },
      // 门店列表
      shopOptions: [],
      // 门店
      shopId: '',
      // 商品列表
      goodList: [],
      // 商品分类列表
      sortList: [],
      // 商品总数
      total: 0
    }
  },
  created () {
    this.getGood()
  },
  methods: {
    // 获取商品分类
    async getGood () {
      const { data: res } = await this.$http.post('mapi/subbranch', this.queryInfo)
      if (res.status !== 1) return this.$message.error('获取列表失败！')
      this.$message.success('获取列表成功！')
      this.goodList = res.data
      this.sortList = res.sort
      this.shopOptions = res.shop
      this.total = this.count
      console.log(res.shop)
    },
    // 按门店导出商品列表
    outputList () {
      // eslint-disable-next-line eqeqeq
      if (this.shopId == '') return this.$message.error('请选择需要导出商品的门店！')
    },
    // 商品搜索条件更改
    termChange (val) {
      console.log(val)
      // eslint-disable-next-line camelcase
      this.queryInfo.search_id = val
    },
    // 商品搜索关键字更改
    searchValChange (val) {
      console.log(val)
      this.queryInfo.keyword = val
    },
    // 点击搜索按钮
    searchGood () {
      const queryInfo = this.queryInfo
      // eslint-disable-next-line eqeqeq
      if (queryInfo.search_id == '1') {
        // eslint-disable-next-line eqeqeq
        if (isNaN(queryInfo.keyword) == true) {
          return this.$message.error('商品id必须为数字！')
        }
      }
      this.getGood()
    },
    getGoodById (id) {
      // eslint-disable-next-line camelcase
      this.queryInfo.cate_id = id
      this.getGood()
    },
    getListBygId (row, column, event) {
      console.log(row, column, event)
    }
  }
}
</script>

<style scoped lang="less">
.el-row{ margin-bottom:10px;}
.el-col .el-select {width:100%;}
.el-col .textbtn{width:100%;padding:15px 10px;height: 100%;text-align: left;}
.el-col.catebg:nth-of-type(odd){background: #f9f9f9;}
.onlyheader  /deep/ .el-table__empty-block{display: none;}
.onlybody /deep/ .cell{padding:0 0;}
.onlybody /deep/ .el-table_2_column_7{padding:0;}
.methodTable  /deep/ .el-table__empty-block{display: none;}
</style>
